Dropdowns

Examples

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Sass

Variables

You can found every SASS Variable on scss/components/bootstrap/_dropdowns.scss

$dropdown-menu-background: $white;
$dropdown-menu-border-radius: 5px;
$dropdown-menu-shadow: $shadow-1;

$dropdown-menu-item-font-size: 14px;
$dropdown-menu-item-font-weight: $font-weight-normal;
$dropdown-menu-item-background__hover: $alice-blue;
$dropdown-menu-item-background__focus: $dropdown-menu-item-background__hover;
$dropdown-menu-item-background__active: $primary;
$dropdown-menu-item-color: $dark;
$dropdown-menu-item-color__hover: $primary;
$dropdown-menu-item-color__focus: $dropdown-menu-item-color__hover;
$dropdown-menu-item-color__active: $white;
$dropdown-menu-item-padding-y: 5px;
$dropdown-menu-item-padding-x: 20px;

$dropdown-toggle-icon-svg-size: 18px;
$dropdown-toggle-icon-gap: 15px;